<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/css/app.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <title>Blog</title>
</head>
<style>
    form{
        width: 100%;
        height: 100%;
    }
    textarea{
        font-size: 10px;
        height: 10%;
        width: 80%;
        padding:10px;
        margin-left: 10px;
        border: 1.5px 	#DCDCDC solid;
        resize: none;
        border-radius: 8px;
    }
</style>
<body>
    <div class="headBar">
        <div class="headBar-items">
            <div class="headBar-item">
                <a th:href="@{'/user/'+${uid}+'/messages?reply=true'}">已回复留言</a>
            </div>
            <div class="headBar-item">
                <a th:href="@{'/user/'+${uid}+'/messages?reply=false'}">未回复留言</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-user">
            <ul th:each="blog:${map.keySet()}">
                <li th:each="message:${map.get(blog)}">
                    <h1 th:text="${message.email}"></h1>
                    <div>
                        <span style="width: 50%" th:text="${blog.title}"></span>
                        <span style="width: 50%;" th:text="${blog.releaseTime}"></span>
                    </div>
                    <div th:text="${message.content}" style="color: #698B69;font-size: 18px"></div>
                    <div th:if="${message.reply!=true}">
                        <form th:action="@{'/user/'+${uid}+'/blog/'+${blog.id}+'/message/'+${message.id}+'/reply'}" method="post">
                            <textarea name="content"></textarea>
                            <button style="margin-left: 20%;font-size: 20px">回复</button>
                        </form>
                    </div>
                    <div th:if="${message.reply==true}">
                        <button style="margin-left: 20%;font-size: 20px;background-color: rgb(254,102,100)">已回复</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>